<template>
  <div class="container" v-loading="loading" element-loading-text="正在检测是否支付成功，支付成功后自动跳转。">
    <div class="top">
      <div class="shang">
        <a href="javascript:;"> </a>
        订单提交成功，请您及时付款，以便尽快为您发货~~
      </div>
      <div class="xia">
        请您在提交订单4小时之内完成支付，超时订单会自动取消。订单号：xxxxxxxxxxxxxxxx
      </div>
    </div>
    <div class="middle">
      <span>重要说明：</span>
      <ol>
        <li>西航汇商城支付平台目前支持 <span>支付宝</span> 支付方式。</li>
        <li>其它支付渠道正在调试中，敬请期待。</li>
        <li>为了保证您的购物支付流程顺利完成，请保存以下支付宝信息。</li>
      </ol>
    </div>
    <div class="bottom">
      <div class="pingtai">
        <span>支付平台</span>
        <div>
          <a href="javascript:;"
            ><img src="./img/pay2.c02be0c6.jpg" alt=""
          /></a>
          <a href="javascript:;"><img src="./img/下载.jpg" alt="" /></a>
        </div>
      </div>
      <div class="wangyin">
        <span>支付网银</span>
        <div>
          <a href="javascript:;"><img src="./img/下载 (1).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (2).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (3).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (4).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (5).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (6).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (7).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (8).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (9).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (10).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (11).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (12).jpg" alt="" /></a>
          <a href="javascript:;"><img src="./img/下载 (13).jpg" alt="" /></a>
        </div>
      </div>
      <div class="qita">
        <span>其他支付方式</span>
        <div>
          <span>中国银联</span>
        </div>
      </div>
    </div>

    <el-button type="danger" size="default" @click="drawer = true"
      >立即支付</el-button
    >
    <el-drawer
      title="扫码支付！"
      :visible.sync="drawer"
      direction="ltr"
      :before-close="handleClose"
    >
      <div style='font-weight:bold;text-align:center'>
        <img src="./img/下载 (1).png" alt="" style='width:100%'>
        <span >扫完点击空白处即可</span>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'EndShopping',
  data () {
    return {
      drawer: false,
      loading: false
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('支付成功？？？？')
        .then((result) => {
          if (result === 'confirm') {
            this.loading = true
            setTimeout(() => {
              this.loading = false
              this.$router.push({
                name: 'good'
              })
            }, 2500)
          }
          done()
        })
        .catch((_) => {})
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  .top {
    .shang {
      a {
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        border-radius: 50px;
        background: url('./img/icon.f599907c.png');
      }
      font-weight: bold;
      font-size: 15px;
      color: rgb(80, 80, 80);
    }
    .xia {
      color: rgb(70, 69, 69);
      font-size: 14px;
      padding-left: 30px;
    }
  }
  .middle {
    border: 2px solid rgb(252, 41, 41);
    height: 120px;
    padding: 10px;
    span {
      color: rgb(252, 41, 41);
      font-weight: bold;
      font-size: 14px;
    }
    ol {
      li {
        list-style-type: decimal !important;
        font-size: 14px;
        color: rgb(71, 71, 71);
      }
    }
  }
  .bottom {
    margin-top: 20px;
    .pingtai,
    .wangyin,
    .qita {
      & > span {
        font-size: 12px;
        font-weight: bold;
        color: rgb(49, 49, 49);
      }
      div {
        padding-left: 20px;
        padding: 18px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        flex-wrap: wrap;
        a {
          border: 1px solid #ccc;
          padding: 8px 15px;
          margin: 5px;
        }
      }
    }
  }
  .el-button {
    height: 60px;
    width: 150px;
    margin: 10px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
</style>
